import { BlogHeader } from "@/components/blog-header"
import { BlogFooter } from "@/components/blog-footer"
import { BlogPostCard } from "@/components/blog-post-card"
import { getPostBySlug, getAllPosts, getRelatedPosts } from "@/lib/blog"
import { parseMarkdown } from "@/lib/markdown"
import { notFound } from "next/navigation"
import { Button } from "@/components/ui/button"
import Link from "next/link"

interface BlogPostPageProps {
  params: {
    slug: string
  }
}

export async function generateStaticParams() {
  const posts = getAllPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

export default async function BlogPostPage({ params }: BlogPostPageProps) {
  const decodedSlug = decodeURIComponent(params.slug)
  const post = getPostBySlug(decodedSlug)

  if (!post) {
    notFound()
  }

  const htmlContent = parseMarkdown(post.content)
  const relatedPosts = getRelatedPosts(decodedSlug, 3)

  return (
    <div className="min-h-screen flex flex-col">
      <BlogHeader />

      <main className="flex-1 py-12 px-4">
        <div className="container max-w-4xl mx-auto">
          <div className="mb-8">
            <Button variant="ghost" asChild className="mb-6">
              <Link href="/blog">← 返回文章列表</Link>
            </Button>

            <div className="text-center mb-8">
              <div className="flex items-center justify-center gap-4 text-sm text-muted-foreground mb-4">
                <span className="bg-primary/10 text-primary px-3 py-1 rounded-full">{post.category}</span>
                <span>{post.date}</span>
                <span>{post.readTime}</span>
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-balance mb-4">{post.title}</h1>
              <p className="text-xl text-muted-foreground text-pretty mb-6">{post.excerpt}</p>

              <div className="flex flex-wrap justify-center gap-2">
                {post.tags.map((tag) => (
                  <Link
                    key={tag}
                    href={`/blog?tag=${encodeURIComponent(tag)}`}
                    className="px-3 py-1 text-sm bg-cyan-100 text-cyan-800 rounded-full hover:bg-cyan-200 transition-colors dark:bg-cyan-900 dark:text-cyan-200 dark:hover:bg-cyan-800"
                  >
                    {tag}
                  </Link>
                ))}
              </div>
            </div>
          </div>

          <article className="prose prose-lg max-w-none mx-auto">
            <div className="markdown-content" dangerouslySetInnerHTML={{ __html: htmlContent }} />
          </article>

          {relatedPosts.length > 0 && (
            <div className="mt-16 pt-8 border-t">
              <h2 className="text-2xl font-bold text-center mb-8">相关文章</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {relatedPosts.map((relatedPost) => (
                  <BlogPostCard key={relatedPost.slug} {...relatedPost} />
                ))}
              </div>
            </div>
          )}
        </div>
      </main>

      <BlogFooter />
    </div>
  )
}
